<template>
	<view class="content">
		<view @click="GoTo(item.url)" class="box" v-for="(item,index) in list" :key="index">
			<image class="Image" :src="item.image" mode="widthFix"></image>
		</view>
		
		<nuoyu-tabbar :backgroundColor="themeColor.tabbarColor" :color="themeColor.font_assist" :selectedColor="themeColor.main_color" :current="current" :tabBar="tabBar"></nuoyu-tabbar>
	</view>
</template>

<script>

export default {
	  data() {
		return {
			current: 1,
			tabBar:[],
			themeColor:'',
			list:[
				{
					title:'第一个',
					url:'/pages/modelLogin/index',
					image:'../../static/nuoyu-index/login1.png'
				},
				{
					title:'第二个',
					url:'/pages/modelLogin/index',
					image:'../../static/nuoyu-index/login1.png'
				},
				{
					title:'第三个',
					url:'/pages/modelLogin/index',
					image:'../../static/nuoyu-index/login1.png'
					
				},
				{
					title:'第四个',
					url:'/pages/modelLogin/index',
					image:'../../static/nuoyu-index/login1.png'
				}
			]
		}
	  },
	onLoad() {
		this.tabBar = this.$store.state.tabBarList
		this.current = this.$store.state.current
		this.themeColor = this.$store.state.themeConfig
 
	},
	methods: {
		GoTo(url){
			uni.navigateTo({
				url:url
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	.content{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		// grid-auto-rows: 200px;
		gap: 20rpx;
		margin: 20rpx;
		.box{
			background: red;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.Image{
				width: 100%;
			}
		}
	}
</style>
